<template>
  <el-form ref="loginForm" :model="phoneInfo" :rules="rules" label-width="0px" :hide-required-asterisk="true" size="large"
    label-position="left" scroll-to-error>
    <el-form-item label="" prop="phoneNumber" size="large">
      <el-input v-model="phoneInfo.phoneNumber" type="text" placeholder="请输入手机号码" :disabled="sendStatus === 'sending'">
        <template #prepend>
          <el-icon>
            <Iphone />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="" prop="code" size="large">
      <el-input v-model="phoneInfo.code" type="text" placeholder="请输入手机短信验证码"
        :disabled="!/^1[3456789]\d{9}$/.test(phoneInfo.phoneNumber) || sendStatus === 'no'"
        @keyup.enter="loginHandle(loginForm)">
        <template #append>
          <el-button link :disabled="!/^1[3456789]\d{9}$/.test(phoneInfo.phoneNumber)" v-if="sendStatus === 'no'"
            @click="send" type="success">发送验证码</el-button>
          <el-button link :disabled="!phoneInfo.phoneNumber" v-else-if="sendStatus === 'yes'" @click="send"
            type="warning">重新发送</el-button>
          <div v-else>
            {{ countdown }}
          </div>
        </template>
      </el-input>
    </el-form-item>
    <div class="w-full flex justify-center items-center p-0 my-5">
      <el-button class="w-full  text-center" type="warning" @click="loginHandle(loginForm)" :loading="loginLoading"
        auto-insert-space>登录</el-button>
    </div>
  </el-form>
</template>

<script  setup>
import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import { useUsersStore } from '@/store/modules/user'
import { Iphone } from '@element-plus/icons-vue'
import { phoneNumber_validator, code_validator } from '@/utils/tools'
const { loginByPhone, set_last_get_code_time, last_get_code_time } = useUsersStore()
const sendCodeInterval = Date.now() - last_get_code_time
const loginForm = ref()
const sendStatus = ref(sendCodeInterval > 60 * 1000 ? 'no' : 'sending')
const phoneInfo = reactive({
  phoneNumber: '',
  code: ''
})
const countdown = ref(sendCodeInterval > 60 * 1000 ? 59 : 59 - parseInt(sendCodeInterval / 1000))
const send = () => {
  // axios.get()
  sendStatus.value = 'sending'
  set_last_get_code_time(Date.now())
  countdownTimer = setInterval(() => {
    countdown.value--
  }, 1000)
}
onMounted(() => {
  if (sendCodeInterval < 60 * 1000) {
    countdownTimer = setInterval(() => {
      countdown.value--
    }, 1000)
  }
})
let countdownTimer = null
const rules = reactive({
  phoneNumber: [{ trigger: 'blur', validator: phoneNumber_validator }],
  code: [{ validator: code_validator, trigger: 'blur' }]
})
const loginLoading = ref(false)
const loginHandle = async (formEl) => {
  loginLoading.value = true
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        await loginByPhone(phoneInfo)
      } catch (error) {
        ElMessage({
          message: error.msg,
          type: 'error'
        })
        loginLoading.value = false
      }
    } else {
      loginLoading.value = false
      return false
    }
  })
}

onBeforeUnmount(() => {
  countdownTimer ? clearInterval(countdownTimer) : undefined
})
watchEffect(() => {
  if (countdown.value === 0) {
    clearInterval(countdownTimer)
    sendStatus.value = 'yes'
    countdown.value = 59
  }
})
</script>